{"version": "2.0","name": "Around","subline": "Mobile & Tablet Responsive Template","username": "Enabled","created": "03/09/2015","website": "http://www.enableds.com","update": "03/09/2015","update_today": false,"email": "","description": "","intro": "","button_1_text": "","button_2_text": "","button_3_text": "","button_1_url": "","button_2_url": "","button_3_url": "","sections": [{"title": "FAQ","id": "faq","content": "<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;\">How do I install the item?</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tCopy and paste all the items in the code folder to your server to your desired location.&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;\">What are those i class&quot;fa &quot; things?</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tThat is Font Awesome, the amazing icons we used for this item you can learn more about them and find a cheatsheet on how to use them here&nbsp;http://fortawesome.github.io/Font-Awesome/icons/</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\t<span style=\"margin: 0px; padding: 0px; border: 0px; outline: 0px; font-weight: 700; font-style: inherit; font-family: inherit; vertical-align: baseline;\">How do I change the contact form information?</span></p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tThere is only one PHP file in the item, please open that item and replace the email address with yours.&nbsp;</p>\n"},{"title": "Navigation","id": "navigation","content": "<pre class=\"html\">\n&lt;ul class=&quot;menu-top&quot;&gt;\n    &lt;li class=&quot;active-menu&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;Homepage&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n    &lt;li&gt;\n        &lt;a class=&quot;has-submenu&quot; href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-cog&quot;&gt;&lt;/i&gt;Features&lt;i class=&quot;fa fa-plus active-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;ul class=&quot;submenu show-submenu&quot;&gt;\n            &lt;li class=&quot;active-menu&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Type Features&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;jQuery Features&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;fa fa-angle-right&quot;&gt;&lt;/i&gt;Other Features&lt;i class=&quot;fa fa-circle&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;\n        &lt;/ul&gt;\n    &lt;/li&gt;\n&lt;/ul&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tLine 1 opens the menu wrapper</p>\n<p>\tLine 2 is a simple menu, no dropdown, and it is selected. You can make it unselected / selected by adding or removing the active-menu class</p>\n<p>\tLine 3 creates a dropdown menu.&nbsp;</p>\n<p>\tLine 4 is the menu item with the plus icon to the right.&nbsp;Adding the class active-plus to the fa will make the plus rotate and simulate an open menu.</p>\n<p>\tLine 5 opens the submenu. Having the show-submenu class added to it makes the submenu opened.&nbsp;</p>\n<p>\tLine 6, 7, and 8 are simple menu items added inside the dropdown. You can make them selected by adding the class active-menu.&nbsp;</p>\n<p>\tLine 9 closes the submenu</p>\n<p>\tLIne 10 closes the main submenu item</p>\n<p>\tLine 11 closes the entire menu.&nbsp;</p>\n<p>\t&nbsp;</p>\n"},{"title": "Header","id": "header","content": "<pre class=\"html\">\n&lt;div class=&quot;header&quot;&gt;\n    &lt;a href=&quot;index.html&quot; class=&quot;header-logo&quot;&gt;&lt;/a&gt;\n    &lt;a href=&quot;#&quot; class=&quot;header-navigation show-navigation&quot;&gt;&lt;i class=&quot;fa fa-navicon&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n&lt;/div&gt;\n\n&lt;div class=&quot;header-clear-big&quot;&gt;&lt;/div&gt;</pre>\n<p>\t&nbsp;</p>\n<p>\tThe header is composed of the logo on the left side and the menu hamburger icon on the right side. To change the logo open style.css and locate line 234. Replace the image there with your own and also replace the width, height and background size. To maintain a clean clear aspect for retina / high dpi screens the logo should be double the size of the width, height and background size set. For example, a logo that&#39;s 100 x 100 size, the width and height should be 50 px and the background size should be 50px 50px.&nbsp;</p>\n<p>\tThe header-clear and header-clear-big classes are used to make space under the fixed header.&nbsp;</p>\n<p>\theader-clear - 60px size, will make the content appear right under the header. This is good for slider pages.</p>\n<p>\theader-clear-big &nbsp;- 90px size. Will make a space between the header and content. This is good for content pages.</p>\n"},{"title": "Homepage Slider","id": "homepage_slider","content": "<pre class=\"html\">\n&lt;div class=&quot;slider-container full-bottom&quot;&gt;\n    &lt;div class=&quot;homepage-slider&quot; data-snap-ignore=&quot;true&quot;&gt;                \n        &lt;div&gt;\n            &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n            &lt;div class=&quot;homepage-slider-caption homepage-left-caption&quot;&gt;\n                &lt;h3&gt;Swipe me!&lt;/h3&gt;\n                &lt;p&gt;Hope you enjoy our latest item!&lt;/p&gt;\n            &lt;/div&gt;\n            &lt;img src=&quot;images/pictures/3.jpg&quot; class=&quot;responsive-image&quot; alt=&quot;img&quot;&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt;</pre>\n<p>\t<span style=\"color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">To create more slides simply duplicate lines 3 to 10 and replace the image and text with yours. The caption text can be left right or center and can be achieved by replacing homepage-SIDE-caption side with left center or right.&nbsp;</span></p>\n"},{"title": "Homepage Columns","id": "homepage_columns","content": "<pre class=\"html\">\n    &lt;p class=&quot;thumb-left no-bottom&quot;&gt;\n        &lt;img src=&quot;images/pictures/1s.jpg&quot; alt=&quot;img&quot;&gt;\n        &lt;strong&gt;Mobile app feel &lt;/strong&gt;\n        &lt;em&gt;&lt;br&gt;Lorem Ipsum is simply dummy text of the printing and typeset. &lt;/em&gt;\n    &lt;/p&gt;\n    &lt;div class=&quot;thumb-clear&quot;&gt;&lt;/div&gt;</pre>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tLine 1 creates the container for the thumbnail with image to the left. The class must be thumb-left.</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tLine 2 is the icon on the left side</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tLine 3 is the title of the icon</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tLine 4 is the closing container for the thumbnail column</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tLine 5 clears the flotation of the columns.<br>\n\t&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tTo create a right thumbnail, simply replace thumb-left with thumb-right and follow the exact same structure as above.&nbsp;</p>\n"},{"title": "Staff Slider","id": "staff_slider","content": "<pre class=\"html\">\n&lt;div class=&quot;container&quot;&gt;\n    &lt;a href=&quot;#&quot; class=&quot;next-staff&quot;&gt;&lt;/a&gt;\n    &lt;a href=&quot;#&quot; class=&quot;prev-staff&quot;&gt;&lt;/a&gt;\n    &lt;div class=&quot;staff-slider&quot; data-snap-ignore=&quot;true&quot;&gt;\n        &lt;div&gt;&lt;!--Duplicate Me--&gt;\n            &lt;div class=&quot;staff-item&quot;&gt;\n                &lt;img src=&quot;images/pictures/1s.jpg&quot; alt=&quot;img&quot;&gt;\n                &lt;h4&gt;John Doe&lt;/h4&gt;\n                &lt;em&gt;Web Designer&lt;/em&gt;\n                &lt;strong&gt;We love quotes, and sometimes it&#39;s&lt;/strong&gt;\n                &lt;a href=&quot;#&quot; class=&quot;button button-red center-button&quot;&gt;Call&lt;/a&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n&lt;/div&gt; </pre>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tTo create more slides, simply duplicate the class that has the &lt;!--Duplicate Me--&gt; comment.</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tAfter doing so, replace the image and text with your own, and you have a new slide</p>\n"},{"title": "Quote Slider","id": "quote_slider","content": "<pre class=\"html\">\n    &lt;div class=&quot;quote-slider full-bottom&quot;&gt;\n        &lt;div&gt;\n            &lt;h4&gt;\n                Great all around product, with some of the best documentation I have ever seen. Really thorough and easy to follow! \n                Also the support responsiveness is really fantastic. Extremely happy with everything. Thanks!\n            &lt;/h4&gt;\n            &lt;a href=&quot;#&quot;&gt;ChrisPizzoDesign - ThemeForest&lt;/a&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;</pre>\n<p>\tDuplicate the inner div to create a new quote message.&nbsp;</p>\n"},{"title": "Content Heading","id": "content_heading","content": "<pre class=\"html\">\n        &lt;div class=&quot;content-heading&quot;&gt;\n            &lt;h4&gt;Featured Project&lt;/h4&gt;\n            &lt;p&gt;Check and enjoy our featured item&lt;/p&gt;\n            &lt;i class=&quot;fa fa-star-o&quot;&gt;&lt;/i&gt;\n            &lt;div class=&quot;overlay&quot;&gt;&lt;/div&gt;\n            &lt;img src=&quot;images/pictures/7w.jpg&quot; alt=&quot;img&quot;&gt;\n        &lt;/div&gt;</pre>\n<p>\t<span style=\"color: rgb(56, 56, 56); font-family: Arial, verdana, arial, sans-serif; line-height: 18px;\">You can replace the image, the icon, and the text to better describe your section. &nbsp;When using a content-heading class you should place it ouside the content class to maintain fullwidth. Open the content class again after adding a content-heading,</span></p>\n<p>\t&nbsp;</p>\n"},{"title": "Page Structure","id": "page_structure","content": "<p>\tPlease check the second documentation to better understand the functions of content and container classes used in this template</p>\n<p>\t&nbsp;</p>\n"},{"title": "Footer","id": "footer","content": "<pre class=\"html\">\n&lt;!-- Page Footer--&gt;\n&lt;div class=&quot;footer&quot;&gt;\n    &lt;div class=&quot;footer-socials half-bottom&quot;&gt;\n        &lt;a href=&quot;#&quot; class=&quot;footer-facebook&quot;&gt;&lt;i class=&quot;fa fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;a href=&quot;#&quot; class=&quot;footer-twitter&quot;&gt;&lt;i class=&quot;fa fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;a href=&quot;#&quot; class=&quot;footer-google&quot;&gt;&lt;i class=&quot;fa fa-google-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;a href=&quot;#&quot; class=&quot;footer-share show-share-bottom&quot;&gt;&lt;i class=&quot;fa fa-share-alt&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n        &lt;a href=&quot;#&quot; class=&quot;footer-up&quot;&gt;&lt;i class=&quot;fa fa-angle-up&quot;&gt;&lt;/i&gt;&lt;/a&gt;\n    &lt;/div&gt;\n    &lt;p class=&quot;center-text&quot;&gt;Copyright 2015. All rights reserved.&lt;/p&gt;\n&lt;/div&gt;</pre>\n<p>\tCopy and paste the structure above to generate the footer. Adding show-share-bottom will create the button that opens the share box at the bottom. This is explaned in the second docuemntation.&nbsp;</p>\n"},{"title": "Is this it?","id": "is_this_it","content": "<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tNo! We have 2 documentations. This one explained the main features of the template, and it&#39;s structure. The second documentation describes the features from each indivudual page.&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tIf there is anything you don&#39;t understand, please send us a message http://enableds.com/html-support/ through our support page and we will gladly assist you with absolutely anything that&#39;s related to the template! We take great pride in providing top notch support to all our customers!&nbsp;</p>\n<p style=\"margin: 18px 0px; padding: 0px; border: 0px; outline: 0px; font-family: Arial, verdana, arial, sans-serif; vertical-align: baseline; line-height: 1.5em; color: rgb(56, 56, 56);\">\n\tPlease don&#39;t forget to rate 5 stars!</p>\n"}],"use_sub": false,"logo": "","favicon": "","customcss": "","easing": "swing","easingduration": "500","bgimage": "","bgrepeat": "repeat","bgattachment": "scroll","bgcolor": "FFFFFF","textcolor": "383838","linkcolor": "0000FF","hrcolor1": "EBEBEB","hrcolor2": "FFFFFF","btncolor": "FFFFFF","btncolor1": "0088CC","btncolor2": "0044CC","sidebarbgimage": "","sidebarbgrepeat": "repeat","sidebarbgcolor": "DDDDDD","sidebartextcolor": "222222","sidebarlinkcolor": "444444","sidebaractivecolor": "444444","sidebaractivetextcolor": "DDDDDD","sidebarhrcolor1": "AAAAAA","sidebarhrcolor2": "EEEEEE","cufon": "","documentationttype": "default","itemURL": "","sendJSON": "","sendZIP": "","sendPWD": ""}